<template>
    <div style="padding-bottom: 100px">
        <div class="top-container">
            <avatar-card :imgUrl="userInfo.headImgUrl || avatarImg" :name="userInfo.nickname || '-'"></avatar-card>
            <amount-card :phone="userInfo.phone"></amount-card>
        </div>
        <!-- 员工端 -->
        <template v-if="userInfo.type === 1 || userInfo.type === 2">
            <van-cell-group>
                <van-cell title="个人资料" is-link to="userInfo">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="user-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="密码修改" is-link to="pswModify">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="eye-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell v-if="userInfo.type === 2" title="我的客户" is-link to="myCustomer">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="eye-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
            <van-cell-group style="margin-top: 10px">
                <van-cell title="意向客户" is-link to="customerInfo">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="thumb-circle-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="月兑付单" is-link to="monthCash">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="label-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="月兑付明细" is-link to="monthCashList">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="label-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="在售产品推荐" is-link to="recommendProducts">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="label-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="公司简介" is-link @click="toDetail">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="label-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </template>
        <!-- 客户端 -->
        <template v-if="userInfo.type === 3">
            <van-cell-group style="margin-top: 10px">
                <van-cell title="个人资料" is-link to="userInfo">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="user-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="我的订单" is-link @click="goOrder">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="todo-list-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <!-- <van-cell title="密码修改" is-link to="pswModify">
                    <template #icon>
                        <div class="icon">
                        <van-icon name="eye-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell> -->
            </van-cell-group>
            <van-cell-group style="margin-top: 10px">
                <van-cell title="我的理财经理" is-link to="myFinancialManager">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="diamond-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="月兑付单" is-link to="monthCash">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="label-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="月兑付明细" is-link to="monthCashList">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="label-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="在售产品推荐" is-link to="recommendProducts">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="label-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
                <van-cell title="公司简介" is-link @click="toDetail">
                    <template #icon>
                        <div class="icon">
                            <van-icon name="label-o" color="#dab374" size="22px" />
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </template>
        <!-- 联系客服 -->
        <van-cell-group style="margin-top: 10px">
            <van-cell title="联系客服" is-link @click="contactService">
                <template #icon>
                    <div class="icon">
                        <van-icon name="warn-o" color="#dab374" size="22px" />
                    </div>
                </template>
            </van-cell>
        </van-cell-group>

        <!-- <van-cell-group
      :style="userInfo.type === 3 ? 'margin-top:10px' : ''"
      v-if="$getToken()"
    >
      <van-cell title="退出登录" @click="logOut">
        <template #icon>
          <div class="icon">
            <van-icon name="warn-o" color="#dab374" size="22px" />
          </div>
        </template>
      </van-cell>
    </van-cell-group> -->
    </div>
</template>

<script>
    import { Toast, Dialog } from "vant";
    import { logout } from "@/api/login";
    import { getDetail as getUserDetail } from "@/api/userInfo";
    import { getDetail } from "@/api/company";
    import avatarCard from "./components/avatar-card";
    import amountCard from "./components/amount-card";
    import avatarImg from "@/assets/images/my/avatar.png";

    export default {
        data() {
            return {
                avatarImg,
                showNotice: false,
                userInfo: {},
            };
        },
        components: {
            avatarCard,
            amountCard,
        },
        async created() {
            let _userInfo = this.$getUserInfo();
            if (!_userInfo) return;
            let detail = await getUserDetail({ id: _userInfo.id });
            if (detail) this.userInfo = detail;
        },
        methods: {
            async toDetail() {
                let info = await getDetail();
                if (!this.$_.isEmpty(info)) {
                    location.href = info.url;
                }
            },
            contactService() {
                location.href = "https://work.weixin.qq.com/kfid/kfcd201c72e75f548fc";
            },
            logOut() {
                Dialog.confirm({
                    title: "提示",
                    message: "是否退出登录？",
                    confirmButtonColor: "#dab374",
                })
                    .then(() => {
                        // on confirm
                        logout().then((res) => {
                            if (res && res.code == 1) {
                                localStorage.setItem("token", "");
                                localStorage.setItem("userInfo", "");
                                Toast("退出登录");
                                setTimeout(() => {
                                    this.$router.replace("/home");
                                }, 1000);
                            }
                        });
                    })
                    .catch(() => {
                        // on cancel
                    });
                return;
            },
            goOrder() {
                const _this = this;
                if (!this.userInfo.phone) {
                    Dialog.confirm({
                        title: "提示",
                        message: "您尚未绑定手机号，无法获取相关订单！",
                        confirmButtonText: "立即绑定",
                    })
                        .then(function () {
                            _this.$router.push("/bindPhone");
                        })
                        .catch(() => {
                            // on cancel
                        });
                } else {
                    this.$router.push("/order");
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .top-container {
        background: #323332;
        padding: 0 10px;
    }
    .icon {
        margin-right: 5px;
    }
</style>
